<html>
	<head>
		<LINK REL=StyleSheet HREF="css/jquery.ui.all.css" TYPE="text/css" MEDIA=screen>
		<LINK REL=StyleSheet HREF="css/quickselect.css" TYPE="text/css" MEDIA=screen>
		<LINK REL=StyleSheet HREF="css/timesheet.css" TYPE="text/css" MEDIA=screen>
		<LINK REL=StyleSheet HREF="css/demo_table.css" TYPE="text/css" MEDIA=screen>
		<script src="scripts/jquery-1.4.4.js"></script>
		<script src="scripts/jquery.quickselect.js"></script>
		<script src="scripts/jquery.dataTables.js"></script>
	<script>
		var _startTime;
		var _endTime;
		var _timeInterval = 1000;
		var _timerID = null;
		var _timerRunning = false;
		var _secondsPerMinute = 60;
		var _secondsPerHour = 60*60;
		var _dataCount =0;
		
		function doTimer()
		{			
			if (_timerRunning==true)
			{
				updateTimeDisplay();
			}
			else
			{
				_startTime = new Date();
				$('#time').attr("value","00:00:00");
				_timerRunning = true
			}
			_timerID = setTimeout("doTimer()", _timeInterval);
		}
		
		function endTimer()
		{
			clearTimeout(_timerID);
			_timerRunning=false;
		}

		
		function formatTime(milliseconds)
		{
			
			var seconds = Math.floor(milliseconds/1000);
			var hr = 0;
			var m = 0;
			var s = 0;
			if (seconds>=_secondsPerHour)
			{
				hr = Math.floor(seconds/_secondsPerHour);
				seconds = seconds - hr*_secondsPerHour;
			}
			if (seconds>=_secondsPerMinute)
			{
				m = Math.floor(seconds/_secondsPerMinute);
				seconds = seconds - m*_secondsPerMinute;
			}
			s=seconds;
			return formatTwoDigits(hr)+":"+ formatTwoDigits(m)+":"+formatTwoDigits(s);
		}
		
		function formatDateTime(dateTimeToFormat)
		{
			var day = dateTimeToFormat.getDate();
			var month = dateTimeToFormat.getMonth()+1;
			var year = dateTimeToFormat.getFullYear();
			var time = dateTimeToFormat.getHours()*_secondsPerHour+dateTimeToFormat.getMinutes()*_secondsPerMinute+dateTimeToFormat.getSeconds();
			//var result = day+"/"+month+"/"+year+" " + formatTime(time*1000);
			var result = formatTime(time*1000);
			return result;
		}
		
		function formatTwoDigits(numberToFormat)
		{
			if (numberToFormat <10)
			{
				return "0" + numberToFormat.toString();
			}
			else
			{
				return numberToFormat.toString();
			}
		}
		
		function updateTimeDisplay()
		{
			_endTime = new Date();
			var timeDifference = _endTime-_startTime;
			$('#time').attr("value",formatTime(timeDifference));
		}
		
		$(function() {	
			var tasks ="Dev,Testing,Docs";
			$('#task').quickselect({selections:tasks,label:"Task",innerContainerClass: "taskContainer"});
			var workitems="WI800,WI801";
			$('#workitem').quickselect({selections:workitems,label:"Work Item"});
			$('#StartStop').hover(function(){ $(this).addClass("ui-state-hover");},function(){ $(this).removeClass("ui-state-hover");})
			$('#StartStop').click(StartStop);
			$('#time').attr("disabled",true);
			$('#timesheetData').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="timesheetItems"></table>' );
				$('#timesheetItems').dataTable( {
					"bPaginate": false,
					"bLengthChange": false,
					"bFilter": false,
					"bSort": false,
					"bInfo": false,
					"bAutoWidth": false,	
					"bJQueryUI": true,
					"aoColumns": [
						{ "sTitle": "Task" },
						{ "sTitle": "Start" },
						{ "sTitle": "Stop" },
						{ "sTitle": "Time" }
					]
				} );
			$('#task_label').attr("disabled",true);		
		});
	
		function StartStop()
		{
			if($('#StartStop').attr("value")=="Start")
			{
				$('#StartStop').attr("value","Stop");
				$('#StartStop').addClass("ui-state-active");
				$('#taskData').children().attr('disabled',false);
				$('#taskData').addClass("ui-state-disabled");
				$('input[id^="task"]').attr("disabled",true);
				doTimer();

			}
			else
			{
				endTimer();
				timeSheetDataAddRow();
				$('#StartStop').attr("value","Start");
				$('#StartStop').removeClass("ui-state-active");
				$('#taskData').removeClass("ui-state-disabled");
				$('input[id^="task"]').attr("disabled",false);
				$('#task_label').attr("disabled",true);
			}
			
			function timeSheetDataAddRow() 
			{
				$('#timesheetItems').dataTable().fnAddData( [
				$('#task').attr("value"),
				formatDateTime(_startTime),
				formatDateTime(_endTime),
				$('#time').attr("value") ] );
				_dataCount++;
			}
		}
	</script>
	</head>
	<body>			
		<div id="taskData" class="taskData ui-widget-header">
			<input type="text" name="task" id="task" class="task" />
		</div>
		<div id="timer" class="timer ui-widget-header">
			<input type="button" id="StartStop" class="fg-button ui-widget ui-state-default startStopButton" value="Start" title="click to start timer"/>
			<input type ="text" id="time" class="timeDisplay ui-widget ui-widget-content" value ="00:00:00">
		</div>
		<div id="timesheetData" class="timesheetData">
		</div>
	</body>
</html>